<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="bp" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册蓝天洗衣店后台管理系统</title>

    <!-- CSS -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
    <link rel="stylesheet" href="${bp}/static/assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${bp}/static/assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${bp}/static/assets/css/form-elements.css">
    <link rel="stylesheet" href="${bp}/static/assets/css/style.css">
    <link rel="shortcut icon" href="${bp}/static/assets/ico/favicon.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144"
          href="${bp}/static/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114"
          href="${bp}/static/assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72"
          href="${bp}/static/assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="${bp}/static/assets/ico/apple-touch-icon-57-precomposed.png">

</head>

<body background="${bp}/static/assets/img/backgrounds/1.jpg">


<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2 text">
                    <h1>
                        <strong>注册蓝天洗衣店</strong>后台管理系统</h1>
                    <div class="description">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 form-box">
                    <div class="form-top">
                        <div class="form-top-left">
                            <h3>注册后台管理系统</h3>
                            <p>Enter your username and password to log on:</p>
                        </div>
                        <div class="form-top-right">
                            <i class="fa fa-lock"></i>
                        </div>
                    </div>
                    <div class="form-bottom">
                        <div class="div user-input">
                            <input id="phone" type="number" class="code" name="phone" placeholder="请输入手机号" required
                                   maxlength="6">

                            <div style="width: 300px;height: 38px;border: 1px solid #3c3f41;border-radius: 30px;background-color: #3c3f41">
                                <input id = "yanzhengma" type="number" style="border-radius: 30px" class="code" name="verify" placeholder="请输入手机验证码" required
                                       maxlength="6">
                                <input style=" border: none;background: transparent;color: #313335;border: none;" type="button" class="obtain generate_code"
                                       value=" 获取验证码">
                            </div>

                            <button onclick="login()">登录</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
<%--<script src="${bp}/static/assets/js/jquery-3.2.1.min.js"></script>--%>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script>
<!-- Bootstrap Js -->
<script src="${bp}/static/assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="${bp}/static/assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="${bp}/static/assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="${bp}/static/assets/js/morris/morris.js"></script>
<script src="${bp}/static/assets/js/easypiechart.js"></script>
<script src="${bp}/static/assets/js/easypiechart-data.js"></script>
<script src="${bp}/static/assets/js/Lightweight-Chart/jquery.chart.js"></script>
<!-- Custom Js -->
<script src="${bp}/static/assets/js/custom-scripts.js"></script>
<script type="application/javascript">

    //验证码
    // $(function(){
    $(".generate_code").click(function () {
        var phone = $("#phone").val();
        var disabled = $(".generate_code").attr("disabled");
        if (disabled) {
            return false;
        }
        if (phone.length != 11) {
            alert("请填写正确的手机号！");
            return false;
        }
        $.ajax({
            type: "POST",
            url: "${bp}/user/yanzhengma",
            data: {"phone":phone},
            dataType: "json",
            async: false,
            success: function (data) {
                if (data == 1) {
                    alert("发送成功")
                    settime();
                }
            },
            error: function (err) {
                console.log(err);
            }
        });
    });
    var countdown = 60;
    var _generate_code = $(".generate_code");

    function settime() {
        if (countdown == 0) {
            _generate_code.attr("disabled", false);
            _generate_code.val("获取验证码");
            countdown = 60;
            return false;
        } else {
            $(".generate_code").attr("disabled", true);
            _generate_code.val("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function () {
            settime();
        }, 1000);
    }

    function login() {
        var phone = $("#phone").val();
        var yanzhengma = $("#yanzhengma").val();
        if (phone === ""){
            alert("手机号为空")
            return false
        }

        if (yanzhengma === ""){
            alert("验证码为空")
            return false
        }

        $.ajax({
            type: "POST",
            url: "${bp}/user/yanzheng",
            data: {"phoneNumbers":phone,"yanzheng":yanzhengma},
            dataType: "json",
            async: false,
            success: function (data) {
                if (data == 1) {
                    alert("手机号不存在或者丢失")
                    return false
                }
                if(data == 2){
                    alert("验证码不存在或者失效")
                    return false
                }
                if(data == 3){
                    alert("redis验证码不存在或者失效")
                    return false
                }
                if(data == 4){
                    window.location = "${bp}/vege/shucai"
                }
                if(data == 5){
                    alert("验证码匹配失败")
                    return false
                }
            }
        });


    }



</script>


</html>